<template>
    <div>
        <div class="bg-gray-500">
            <!-- <h1 class="text-center text-lg">一些小的Demos</h1> -->
            <!-- {{ $route.name }} -->
            <div
                class="my-0.5 text-sm text-center py-1 text-gray-100 flex flex-row flex-wrap justify-center items-center"
            >
                <router-link :to="{ name: 'calc' }" class="lzh-nav-link">
                    计算器
                </router-link>
                <span class="text-sm px-2 ">|</span>
                <router-link :to="{ name: 'calendar' }" class="lzh-nav-link">
                    日历
                </router-link>
                <!-- <router-link :to="{ name: 'login-register' }" class="lzh-nav-link">
                    登录&注册
                </router-link> -->
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
// import { useRouter } from "vue-router";

export default defineComponent({
    name: "DemoIndexComp",
    props: {
        inactiveClass: String,
    },
    setup() {
        // // const route = useRoute();
        // // console.log("route", route.fullPath);
        // const router = useRouter();
        // // console.log("router:", router);

        // const opentDefalutChildRouter = () => {
        //     router.push({name:'calc'});
        // };
        // router.beforeEach((to, from) => {
        //     // console.log("to:",to);
        //     // console.log("from:",from);
        //     if (to.name === "demos") {
        //         opentDefalutChildRouter();
        //     }
        // });
        // onMounted(() => {
        //     // console.log("onMounted", useRoute());
        //     opentDefalutChildRouter();
        // });
        return {};
    },
});
</script>

<style scoped></style>
